<template>
	<view class="content">
		<uni-search-bar radius="5" placeholder="请输入关键字搜索" @confirm="search" v-model="para.locationName" @cancel="clear"
			@clear="clear">
		</uni-search-bar>
		<!-- <uni-data-select v-model="seasonflag" :localdata="flagList" @change="change"></uni-data-select>
		<uni-data-select v-model="flag" :localdata="flagList" @change="change"></uni-data-select> -->
		<view class="list-content">
			<view class="item-list" v-for="(item, index) in mallList" :key="item.id" @click="toDetail(item)">
				<image mode="widthFix" :src="item.image" class="item-image"></image>
				<view class="item-title">{{ item.name }}</view>
				<view class="item-desc">{{ item.desc }}</view>
			</view>
		</view>
	</view>
</template>

<script>
import { appLocPage, getTypeList } from '@/api/index.js';
export default {
	data() {
		return {
			seasonflag: '按季节',
			currentTab: 0,
			tabNameList: [],
			tabList: [],
			dataList: [],
			mallList:[
				{
					id:'0',
					name:'方竹笋',
					desc:'南川土特产，营养健康，超值爆款，方竹笋',
					image: 'https://yq.zjol.com.cn/ztpd_12316/ztgj/202105/W020210519322682783667.jpg'
				},
				{
					id:'1',
					name:'金佛山贡米',
					desc:'南川土特产，营养健康，超值爆款，金佛山贡米',
					image: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.ZlhslJXGqto25tIUEMc7XQAAAA?w=184&h=184&c=7&r=0&o=5&dpr=2&pid=1.7'
				},
				{
					id:'2',
					name:'天麻',
					desc:'南川土特产，营养健康，超值爆款，南川天麻',
					image: 'https://www.51xuediannao.com/upload/techan/chongqing/39362.gif'
				},
				{
					id:'3',
					name:'水江热灰粑',
					desc:'南川土特产，营养健康，超值爆款，水江热灰粑',
					image: 'https://ts1.cn.mm.bing.net/th/id/R-C.466e9597fbd8776cbba5cdd350db7192?rik=yybaRD%2fYjibUxA&riu=http%3a%2f%2fwww.chandibao.com%2fuploads%2fallimg%2f220212%2f1-220212003K6.jpg&ehk=9tjhLhVDr5s%2f2Z6nwhZCA66CK6srBapd6Gqg4l%2b5aGM%3d&risl=&pid=ImgRaw&r=0'
				},
				{
					id:'4',
					name:'大树茶',
					desc:'南川土特产，营养健康，超值爆款，南川大树茶',
					image: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.vO7kZL_EeyK-WQmxwmpCcQHaE6?w=289&h=191&c=7&r=0&o=5&dpr=2&pid=1.7'
				}
			],
			para : {
				current: 0,
				size: 100,
				locationTypeId: 0,
				locationName:''
			}
		};
	},
	onLoad() {
		this.getTypeListData();
	},
	methods: {
		getTypeListData() {
			let that = this;
			getTypeList({}).then((respond) => {
				console.log('tyeListData:', respond.data);
				const dataArr = respond.data;
				if (dataArr && respond.code === 200) {
					dataArr.map((item) => {
						that.tabList.push(item);
						that.tabNameList.push(item.name);
					});
				}
				const defaultType = dataArr[0].id;
				that.para.locationTypeId = defaultType;
				that.getLocationList();
			});
		},
		getLocationList() {
			let that = this;
			// uni.showLoading({
				
			// });
			appLocPage(this.para).then((respond) => {
				const dataArr = respond.data;
				// uni.hideLoading();
				that.dataList = dataArr;
			});
		},
		toDetail(item) {
			uni.navigateTo({
				url: `/pages/map/mapDetail?id=` + item.id
			});
		},
		onChange(e) {
			this.currentTab = e.currentIndex;
			this.para.locationTypeId = this.tabList[e.currentIndex].id;
			this.getLocationList();
		},
		search() {
			this.getLocationList();
		},
		clear() {
			this.para.locationName = '';
			this.getLocationList();
		}
	}
};
</script>

<style>
.list-content {
	padding: 30rpx;
	box-sizing: border-box;
	column-count: 2;
}
.item-list {
	break-inside: avoid;
	width: 330rpx;
	background-color: #ffffff;
	border-radius: 10rpx;
}
.item-image {
	width: 100%;
	border-radius: 10rpx;
}
.item-title {
	margin-left: 15rpx;
	margin-right: 15rpx;
	font-size: 30rpx;
}
.item-desc {
	margin: 15rpx;
	margin-top: 20rpx;
	display: flex;
	font-size: 26rpx;
	align-items: center;
	justify-content: space-between;
}
</style>
